<template>
  <div>
    <ol >
      <li>全选<input type="checkbox" @change="chooseAll(flag)" v-model="flag"/></li>
      <li>#</li>
      <li>商品名字</li>
      <li>商品图片</li>
      <li>商品数量</li>
      <li>操作</li>
    </ol>
    <listItem v-for="(item, index) in all" :key="index" :item="item" :index="index" @chooseOne="chooseOne"/>
  </div>
</template>

<script>
import listItem from "./cart-list-item";
export default {
  components: { listItem },
  props: ["all"],
  data() {
    return {
        flag:false
    }
  },
  methods:{
    chooseAll(flag){
        this.$emit('chooseAll',flag)
    },
    chooseOne(index){
       this.$emit('chooseOne',index)
    }
  },
  watch:{
    all:{
      handler(val){
        if(val.filter(item=>item.flag==true).length==val.length){
            this.flag = true
        }else{
          this.flag = false
        }
      },
      deep:true,
      immediate:true
    }
  }
};
</script>
<style>
ol {
  list-style: none;
}
ol {
  width: 100%;
  display: flex;
  justify-content: space-around;
}
ol li{
    flex: 1;
    border: 1px solid;  
}
</style>